<template>
	<uni-popup ref="popup">
		<view class="model">
			<view class="model-content">
				<view class="model-header">
					<view class="model-title">选择立案条件</view>
					<view class="model-close" @tap="close">
						<image class="model-close-icon" mode="aspectFit" src="@/static/icon/iv_close.png"></image>
					</view>
				</view>
				<view class="model-body">
					<view class="ch-list list-types">
						<view class="list-group">
							<view class="list-item" v-for="(type, index) in typeLv3s" :key="index">
								<view class="list-item-btn" @tap="selectedItem(type)">{{ type.name}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
export default{
	props: {
		list: {
			type: Array,
			default() {
				return []
			}
		}
	},
	data() {
		return {
			typeLv3s: []
		}
	},
	methods: {
		init(val) {
			this.typeLv3s = val.slice(0);
		},
		radioChange() {},
		selectedItem(type){
			this.$emit('sendData', type);
		},
		open(){
			this.$refs.popup.open();
		},
		close() {
			this.$refs.popup.close();
		}
	},
	watch: {
		list: {
			handler(val, oldVal) {
			   this.init(val);
			}
		}
	},
	created() {},
	mounted() {}
}
</script>

<style lang="scss">
	.model{
		width: 720rpx;
		overflow: hidden;
		border-radius: 30rpx;
		background-color: #ffffff;
		.model-header{
			background-color: #f29004;
			position: relative;
			top: 0rpx;
			left: 0rpx;
			border-radius: 30rpx 30rpx 0rpx 0rpx;
			.model-title{
				padding: 16rpx 0rpx;
				font-size: 28rpx;
				line-height: 34rpx;
				text-align: center;
				color: #ffffff;
			}
			.model-close{
				width: 60rpx;
				height: 60rpx;
				position: absolute;
				top: 0rpx;
				right: 0rpx;
				border-radius: 0rpx 30rpx 0rpx 0rpx;
				.model-close-icon{
					width: 60rpx;
					height: 60rpx;
					border-radius: 0rpx 30rpx 0rpx 0rpx;
				}
			}
		}
		
		.model-body{
			padding: 10rpx 10rpx 10rpx;
		}
	}
	
	.ch-list {
		&.list-types {
			width: 100%;
			min-height: 500rpx;
			background-color: #ffffff;
			.list-group {
				.list-item {
					margin-bottom: 10rpx;
					position: relative;
					top: 0rpx;
					left: 0rpx;
					&:after {
						content: '';
						background-color: #999;
						opacity: 0.5;
						height: 1rpx;
						position: absolute;
						right: 20rpx;
						bottom: 0rpx;
						left: 20rpx;
					}

					.list-item-btn {
						padding: 30rpx 20rpx;
						font-size: 28rpx;
						line-height: 120%;
						color: #5d5d5d;
					}
				}
			}
		}
	}
</style>
